import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Avatar, Badge } from "@material-ui/core"
import { useSelector, useDispatch } from 'react-redux'
import { Section } from 'components/organisms';
import { Icon } from 'components/atoms';
import { Upload } from "antd"
import { callUploadFileNews } from 'utils/networking';
import { setProfile } from 'redux/actions/AuthActions';
import { useHistory } from "react-router-dom";

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "calc(50vh - 64px)",
        padding: "0 10%",
        background: "linear-gradient(150deg, rgb(10, 10, 10, 0.60) 30%, rgb(30, 30, 30, 0.20) 50%, rgb(10, 10, 10, 0.60) 70%)",
        display: 'flex',
        justifyContent: 'start',
        alignItems: 'center',
        flexDirection: "column",
        overflow: "hidden",
        position: "relative",
        [theme.breakpoints.up('sm')]: {
            height: "calc(70vh - 64px)",
        },
        [theme.breakpoints.up('md')]: {
            height: "calc(100vh - 64px)",
        },
    },
    section: {
        padding: "30px",
        position: 'relative',
        zIndex: 10,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        [theme.breakpoints.up('md')]: {
            padding: "80px",
        },
    },
    avatar: {
        width: "120px",
        height: "120px",
        [theme.breakpoints.up('md')]: {
            width: "160px",
            height: "160px",
        },
    },
    badge: {
        '& .MuiBadge-badge': {
            right: "0%",
            left: "0%",
            margin: "auto",
            transform: "none",
            cursor: "pointer",
        },
    },
    backgroundImage: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        backgroundSize: '100% 100%',
        [theme.breakpoints.up('sm')]: {
            backgroundSize: '100% 130%',
        },
        [theme.breakpoints.up('md')]: {
            backgroundSize: '100% 150%',
        },
        [theme.breakpoints.up('lg')]: {
            backgroundSize: '100% 180%',
        },
        opacity: "0.6",
        zIndex: 1
    },
    button: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: "30px",
        width: '80%',
        margin: "0 auto",
        zIndex: 10,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        [theme.breakpoints.up('sm')]: {
            width: '60%',
        },
        [theme.breakpoints.up('md')]: {
            width: '70%',
            bottom: "80px",
        },
        [theme.breakpoints.up('lg')]: {
            width: '60%',
            bottom: "100px",
        },
    },
    buttonItem: {
        color: "#000",
        fontSize: "16px",
        padding: "8px 16px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        background: "#FFFFFF",
        cursor: "pointer",
        fontWeight: 700,
        margin: "0 3px",
        [theme.breakpoints.up('md')]: {
            padding: "12px 40px",
            margin: "0 5px",
        },
    },
    buttonItem1: {
        position: 'absolute',
        right: "20px",
        top: "30px",
        color: "#7E53F9",
        zIndex: 10,
        border: "1px solid #fff",
        background: "transparent",
        padding: "6px 12px",
        fontSize: "12px",
        [theme.breakpoints.up('md')]: {
            right: "60px",
            top: "80px",
            padding: "12px 50px",
            fontSize: "16px",
        },
    },
    buttonImg: {
        right: "35px",
        top: "80px",
        padding: "3px 12px",
        [theme.breakpoints.up('md')]: {
            right: "120px",
            top: "20px",
            padding: "8px 12px",
        },
    },
    buttonChange: {
        marginTop: "20px",
        borderRadius: "4px"
    },
}));

function Banner(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const dispatch = useDispatch()
    const history = useHistory();

    const profileData = useSelector((state) => state.auth.profileData)
    console.log(profileData);

    const [avatarImg, setAvatarImg] = useState(null);
    const [backgroundImg, setBackgroundImg] = useState(null);
    const [uploadFiles, setUploadFiles] = useState({
        backgroundImg: "",
        avatarImg: "",
    });

    const avatarImgProps = {
        name: 'file',
        headers: {
            authorization: 'authorization-text',
        },
        beforeUpload: {
            function() {
                return false;
            }
        },
        showUploadList: false,
        maxCount: 1,
        style: { border: "none" },
        onChange(file) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                setUploadFiles({ ...uploadFiles, avatarImg: file.file })
                setAvatarImg(fileReader.result)
            }
            fileReader.readAsDataURL(file.file);
        },
    };

    const backgroundImgProps = {
        name: 'file',
        headers: {
            authorization: 'authorization-text',
        },
        beforeUpload(file) {
            return false
        },
        showUploadList: false,
        maxCount: 1,
        style: { border: "none" },
        onChange(file) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                console.log(file)
                setUploadFiles({ ...uploadFiles, backgroundImg: file.file })
                setBackgroundImg(fileReader.result)
            }
            fileReader.readAsDataURL(file.file);
        },
    };

    const handleChange = () => {
        if (avatarImg || backgroundImg) {
            const bodyData = {
                image: uploadFiles.avatarImg,
                back_image: uploadFiles.backgroundImg,
            }
            callUploadFileNews('user/update_profile_with_image', bodyData, dispatch, (data) => {
                console.log(data);
                dispatch(setProfile(data));
                setUploadFiles({
                    backgroundImg: "",
                    avatarImg: ""
                })
                setAvatarImg(null)
                setBackgroundImg(null)
            })
        }
    };

    const moveDetailPage = (id) => {
        history.push("follow", id);
    }

    return (
        <div className={clsx(classes.root)} >

            <div style={{ backgroundImage: `url(${profileData ? (backgroundImg ? backgroundImg : profileData.backImage) : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image@2x.jpg 2x"})` }} className={classes.backgroundImage}>

            </div>
            <Section className={classes.section} disablePadding fullWidth>
                <Badge
                    overlap="circular"
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right',
                    }}
                    className={classes.badge}
                    badgeContent={<Upload {...avatarImgProps}><Icon
                        fontIconClass="fas fa-camera"
                        style={{ color: "#fff", margin: "0 10px", zIndex: 19 }}
                    /></Upload>}
                >
                    <Avatar src={avatarImg ? avatarImg : profileData?.avatarURL} className={classes.avatar} />
                </Badge>
                <div className={clsx(classes.buttonItem, classes.buttonChange)} onClick={handleChange}>Save Changes</div>

            </Section>
            <div className={classes.button}>
                <div className={classes.buttonItem} style={{ background: "#7E53F9", color: "#fff" }} onClick={() => moveDetailPage(0)}>Followers</div>
                <div className={classes.buttonItem} onClick={() => moveDetailPage(1)}>Following</div>
                {
                    profileData?.following_count && <div className={classes.buttonItem} style={{ background: "#D3D3D3" }}>Message</div>
                }
            </div>
            <div className={clsx(classes.buttonItem, classes.buttonItem1)}>FOLLOWING</div>
            <div className={clsx(classes.buttonItem, classes.buttonItem1, classes.buttonImg)}><Upload {...backgroundImgProps}><Icon
                fontIconClass="fas fa-camera"
                style={{ color: "#fff", margin: "0 10px", zIndex: 19 }}
            /></Upload></div>
        </div>
    )
}

Banner.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default Banner

